<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:58:56
 * @LastEditTime: 2022-03-31 09:28:26
-->
<template>
	<div class="panel">
		<div class="header">
      <h1>企业账户信息</h1>
      <h2>碳链地址：<a href="http://ceshiqiy" target="_blank">http://ceshiqiy</a></h2>
    </div>
    <div class="panel-body">
      <div class="panel-icon">
        <img src="@/assets/images/worktable/icon_app_1.png" />
      </div>
      <div class="panel-item content">
        <h3>测试企业测试企业测试企业测试</h3>
        <ul>
          <li>法定代表人：<span class="faren">李四</span> | <span>统一社会信用代码：92734939334</span> | <span>营业执照注册号：927349393343</span></li>
          <li>地址：测试企业的地址测试企业的地址测试企</li>
          <li>简介：测试企业的简介测试企业的简介测试企</li>
        </ul>
        <div class="btn-download">下载私钥文件</div>
      </div>
    </div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import icon_1 from '@/assets/images/worktable/icon_1.png';
import icon_2 from '@/assets/images/worktable/icon_2.png';
import icon_3 from '@/assets/images/worktable/icon_3.png';
import icon_5 from '@/assets/images/worktable/icon_5.png';
import icon_6 from '@/assets/images/worktable/icon_6.png';
import icon_7 from '@/assets/images/worktable/icon_7.png';
type EChartsOption = echarts.EChartsOption;
// const nengList = ref([]) as any
// const tanpaifangList = ref([]) as any
const chartDom = ref()
let option: EChartsOption
const evaluationChart = ref<HTMLElement>()
const props = defineProps(['data', 'tableData'])

// let chartHeight: number = 500
// let chartWidth: number = 0
// let appInfo = ref({})
// // const loginUrl = process.env.BASE_URL_LP
// // const loginUrlLocal = import.meta.env.VITE_LP_URL;
// // const lpUrl = loginUrl?loginUrl:loginUrlLocal
// // console.log(`loginUrl `+loginUrl)
// // console.log(`loginUrlLocal `+loginUrlLocal)
// //authorityApp 授权登录应用(1:绿评 2:绿金)
// nengList.value = [
//   {
//     id: 1,
//     name: "计划能耗",
//     value: '18.65万',
//     unit: 'kWh',
//     img: icon_1,
//     iconcolor: '#DAF7F0',
//     classname: ''
//   },
//   {
//     id: 2,
//     name: "实际能耗",
//     value: '18.65万',
//     unit: 'kWh',
//     img: icon_2,
//     iconcolor: '#D5EAFF',
//     classname: ''
//   },
//   {
//     id: 3,
//     name: "较上月",
//     value: '+50.32%',
//     unit: '',
//     img: icon_3,
//     iconcolor: '#E7E6FE',
//     classname: 'up'
//   },
//   {
//     id: 4,
//     name: "较去年同期",
//     value: '-20.06%',
//     unit: '',
//     img: icon_3,
//     iconcolor: '#FFF5CA',
//     classname: 'down'
//   }
// ]
// tanpaifangList.value = [
//   {
//     id: 1,
//     name: "已排放总量",
//     value: '42,450',
//     unit: '',
//     img: icon_5,
//     iconcolor: '#FFF5CA',
//     classname: ''
//   },
//   {
//     id: 2,
//     name: "已耗能总量",
//     value: '42,450',
//     unit: '',
//     img: icon_6,
//     iconcolor: '#FFE9D5',
//     classname: ''
//   },
//   {
//     id: 3,
//     name: "预计排放总量",
//     value: '42,450',
//     unit: '',
//     img: icon_7,
//     iconcolor: '#DAF7F0',
//     classname: ''
//   },
//   {
//     id: 4,
//     name: "预计耗能总量",
//     value: '42,450',
//     unit: '',
//     img: icon_7,
//     iconcolor: '#FFF5CA',
//     classname: ''
//   }
// ]

onMounted(() => {
    initChart()
})
const initChart = () => {
  // const data = getData()
  // const data = {}
  chartDom.value = document.getElementById('main2');
  const myChart = echarts.init(chartDom.value);
  // myChart.on('click', handleClick)  // 左击
  option = {
    title: {
      text: '85',
      left: 'center',
      top: 62,
      textStyle: {
        color: '#242F57'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    // visualMap: {
    //   show: false,
    //   min: 80,
    //   max: 600,
    //   inRange: {
    //     colorLightness: [0, 1]
    //   }
    // },
    legend: {
      orient: 'vertical',
      bottom: 10,
      itemWidth: 16,
      itemHeight: 16,
      data: ['服务企业', '监控企业'],
      textStyle: {
        rich: {
          a: {
            width: 100,
            color: '#636D96'
          },
          b: {
            width: 40,
            color: '#97A0C3'
          },
          c: {
            width: 60,
            color: '#97A0C3'
          }
        }
      },
      formatter: function(name) {
        return '{a|' + name + '}' + '{b|40}' + '{c|45%}'
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        // radius: '55%',
        radius: ['25%', '55%'],
        center: ['50%', '35%'],
        data: [
          { value: 335, name: '服务企业', itemStyle: {color: '#0080FF'} },
          { value: 260, name: '监控企业', itemStyle: {color: '#1FD0A3'} }
        ],
        roseType: 'radius', // 是否展示成南丁格尔图
        label: {
          show: false,
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          // color: ['#c23531', '#ffffff'],
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        animationType: 'scale', // 初始动画效果 缩放效果
        animationEasing: 'elasticOut', // 初始动画的缓动效果
        animationDelay: function (idx) { // 初始动画的延迟
          return Math.random() * 100;
        }
      }
    ]
  }
    myChart.setOption(option)
    // // 计算需要展示的高度和宽度
    // var allNode=0;
    // var nodes=myChart._chartsViews[0]._data._graphicEls;
    // for(var i=0,count =nodes.length;i<count;i++) {
    //   var node=nodes[i];
    //   if(node===undefined)
    //       continue;
    //   allNode++;
    // }
    // getTreeDepth(data)
    // chartHeight = allNode * 75
    // chartWidth = level > 2 ? (level-2) * 440 + 580 : 580
    // myChart.resize({height: chartHeight,width: chartWidth})//设置图表动态高度&宽度
}

</script>

<style lang="scss" scoped>
.panel {
  margin-bottom: 25px;
  // height: 359px;
  // padding: 0 20px;
  // background: #FFFFFF;
  // box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
  // border-radius: 10px;
  // border: 1px solid #EAEDF7;
  .header {
    margin: 25px 0;
		h1 {
			color: #242F57;
			font-size: 26px;
		}
		h2 {
			color: #636E95;
			font-size: 16px;
      font-weight: normal;
      a {
        color: #008CFF;
      }
		}
	}
  .title {
    padding: 20px 0;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #242F57;
    line-height: 1em;
  }
  .panel-body {
    display: flex;
    height: 180px;
    padding: 0 20px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
    border-radius: 10px;
    border: 1px solid #EAEDF7;
    .panel-icon {
      padding-top: 20px;
    }
    .panel-item {
      flex: 1;
      padding: 20px;
      position: relative;
      h3 {
        font-size: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #242F57;
      }
      ul {
        li {
          margin-top: 12px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #636E95;
        }
      }
      .btn-download {
        position: absolute;
        top: 20px;
        right: 0;
        width: 172px;
        height: 42px;
        padding-left: 43px;
        box-sizing: border-box;
        line-height: 42px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        background: #0A84FF url('@/assets/images/worktable/xiazai.png') no-repeat 17px center;
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }
}
// /deep/ .el-table {
//   .cell {
//     line-height: 50px !important;
//   }
  
// }
// panel-inner-tb
</style>
<style scoped>
/* /deep/ .panel-inner-tb .cell {
  line-height: 50px !important;
} */
.panel-inner-tb th {
  color: #646E97 !important;
}
</style>
